<template>
  <div>
    <div class="amap-marker-icon-detail">
      <div class="up-btn">
        <el-button icon="el-icon-arrow-up" size="mini" @click="handleMarkerIconUpBtn"></el-button>
      </div>
      <div class="main">
        <div class="main-move" id="markerIconMove">
          <div
            class="img-content"
            v-for="item of markerIconList"
            :key="item.id"
            :title="item.title"
          >
            <img :src="item.imgUrl" />
            <div>{{item.title}}</div>
          </div>
        </div>
      </div>
      <div class="down-btn">
        <el-button icon="el-icon-arrow-down" size="mini" @click="handleMarkerIconDownBtn"></el-button>
      </div>
      <div class="more-btn">
        <el-button icon="el-icon-more" size="mini" title="查看更多" @click="handleShowMoreMarkerIcon"></el-button>
      </div>
    </div>
    <el-card class="amap-marker-icon-more" v-show="showMoreMarkerIcon">
      <div slot="header" class="clearfix">
        <span class="amap-marker-icon-more-title">图例展示</span>
      </div>
      <div class="amap-marker-icon-more-main">
        <div class="img-content" v-for="item of markerIconList" :key="item.id" :title="item.title">
          <img :src="item.imgUrl" />
          <div>{{item.title}}</div>
        </div>
      </div>
      <el-button type="primary" @click="handleShowMoreMarkerIcon">关闭</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'amapMarkerIconDetail',
  data() {
    return {
      markerIconList: [
        {
          id: 0,
          imgUrl: 'static/amap/d_ngj.png',
          title: '新光交箱'
        },
        {
          id: 1,
          imgUrl: 'static/amap/d_ogj.png',
          title: '原光交箱'
        },
        {
          id: 2,
          imgUrl: 'static/amap/d_ngf.png',
          title: '新光分箱'
        },
        {
          id: 3,
          imgUrl: 'static/amap/d_ogf.png',
          title: '原光分箱'
        },
        {
          id: 4,
          imgUrl: 'static/amap/w_njth.png',
          title: '新接头盒'
        },
        {
          id: 5,
          imgUrl: 'static/amap/w_ys.png',
          title: '引上'
        },
        {
          id: 6,
          imgUrl: 'static/amap/w_pn.png',
          title: '盘留'
        },
        {
          id: 7,
          imgUrl: 'static/amap/point.png',
          title: '操作点'
        }
      ],
      moveTop: 0,
      moveLength: 132,
      showMoreMarkerIcon: false
    }
  },
  methods: {
    /**
     * 图例展示向上按钮,一个窗口 44 * 52
     */
    handleMarkerIconUpBtn() {
      if (this.moveTop >= 0) {
        return
      }
      let markerMove = document.querySelector('#markerIconMove')
      this.moveTop += 52
      markerMove.style.top = this.moveTop + 'px'
    },
    /**
     * 图例展示向下按钮,一个窗口
     */
    handleMarkerIconDownBtn() {
      if (this.moveTop <= -this.moveLength) {
        return
      }
      let markerMove = document.querySelector('#markerIconMove')
      this.moveTop -= 52
      markerMove.style.top = this.moveTop + 'px'
    },
    /**
     * 显示更多 marker icon 的所有信息
     */
    handleShowMoreMarkerIcon() {
      this.showMoreMarkerIcon = !this.showMoreMarkerIcon
    }
  }
}
</script>

<style scoped>
/* 图例展示框 包含 up down more 按钮 */
.amap-marker-icon-detail {
  width: 44px;
  height: 340px;
  position: absolute;
  top: 80px;
  right: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 5px;
  font-size: 12px;
}
.up-btn,
.down-btn,
.more-btn {
  flex: 0.1;
}
.amap-marker-icon-detail .main {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.amap-marker-icon-detail .main-move {
  position: absolute;
  top: 0;
  left: 0;
}
.img-content {
  width: 44px;
  height: 52px;
  border: 1px solid #eee;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.img-content img {
  width: 30px;
  height: 30px;
}
.img-content div {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* 图例展示弹框 所有 icon 的展示 */
.amap-marker-icon-more {
  width: 306px;
  position: absolute;
  top: 80px;
  right: 44px;
  background: #fff;
  font-size: 12px;
}
.amap-marker-icon-more-title {
  font-size: 18px;
}
.amap-marker-icon-more-main {
  margin: 6px auto;
  display: flex;
  flex-wrap: wrap;
}
</style>